<template>
 <mt-tabbar v-model="selected" class="myfooter">
    <div class="car" v-if="islogin">{{carlength | limitnum}}</div>
  <mt-tab-item id="home" >
    <!-- <router-link > -->
    <strong slot="icon" class="ico" ref="a" >&#xe73d;</strong>
    <span ref="b" >首页</span>

  </mt-tab-item>
  <mt-tab-item id="shoplist" >
    <strong slot="icon" class="ico" ref="c">&#xe76b;</strong>
    <span ref="d">商品</span>
  </mt-tab-item>
  <mt-tab-item id="cart" >

    <strong slot="icon" class="ico" ref="e">&#xe750;</strong>
    <span ref="f">购物车</span>
  </mt-tab-item>
  <mt-tab-item id="mine">
    <strong slot="icon" class="ico" ref="g">&#xe743;</strong>
    <span ref="h">我的</span>
  </mt-tab-item>
</mt-tabbar>
</template>

<script>
import {
  mapState,
  mapGetters
  // mapMutations,
  // mapActions
} from 'vuex'
export default {
  name: 'myfooter',
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // console.log(to.name)
      vm.selected = to.name
      // console.log(vm.selected)
    })
  },
  mounted () {
    // document.getElementById('#' + this.selected).style.color = 'red'
  },
  computed: {
    ...mapState([

    ]),
    ...mapGetters([
      'carlength',
      'islogin'
    ])
  },
  data () {
    return {
      selected: 'cart'
    }
  },
  watch: {

    selected (n) {
      if (n === 'home' || n === 'shoplist') {
        if (n === 'shoplist') {
          this.$router.push({
            name: 'category',
            params: {
              id: this.$route.params.id || 2
            }
          })
        } else {
          this.$router.push({
            name: n

          })
        }
        // console.log(this.$route)
      } else if (n === 'cart' || n === 'mine') {
        if (this.islogin) {
          this.$router.push({
            name: n
          })
        } else {
          this.$router.push({
            name: 'login'
          })
        }
      }
    },
    $route () {
      this.selected = this.$route.name
      // console.log(this.$route.name)
      if (this.$route.name === 'home') {
        this.$refs.a.style.color = 'red'
        this.$refs.b.style.color = 'red'
        this.$refs.c.style.color = '#000'
        this.$refs.d.style.color = '#000'
        this.$refs.e.style.color = '#000'
        this.$refs.f.style.color = '#000'
        this.$refs.g.style.color = '#000'
        this.$refs.h.style.color = '#000'
      }
      if (this.$route.name === 'mine') {
        this.$refs.a.style.color = '#000'
        this.$refs.b.style.color = '#000'
        this.$refs.c.style.color = '#000'
        this.$refs.d.style.color = '#000'
        this.$refs.e.style.color = '#000'
        this.$refs.f.style.color = '#000'
        this.$refs.g.style.color = 'red'
        this.$refs.h.style.color = 'red'
      }
      if (this.$route.name === 'category') {
        this.$refs.a.style.color = '#000'
        this.$refs.b.style.color = '#000'
        this.$refs.c.style.color = 'red'
        this.$refs.d.style.color = 'red'
        this.$refs.e.style.color = '#000'
        this.$refs.f.style.color = '#000'
        this.$refs.g.style.color = '#000'
        this.$refs.h.style.color = '#000'
      }
      if (this.$route.name === 'cart') {
        this.$refs.a.style.color = '#000'
        this.$refs.b.style.color = '#000'
        this.$refs.c.style.color = '#000'
        this.$refs.d.style.color = '#000'
        this.$refs.e.style.color = 'red'
        this.$refs.f.style.color = 'red'
        this.$refs.g.style.color = '#000'
        this.$refs.h.style.color = '#000'
      }
    }
  }

}

</script>

<style scoped lang="scss">
  .myfooter{
    position: fixed;
    bottom: 0;
    left: 0;
    right:0;
    .car{
      width:30px;
      height: 30px;
      background-color: red;
      position: absolute;
      left:70%;
      top:-10px;
      z-index:999;
      text-align: center;
      color:#fff;
      border-radius: 50%;
      line-height: 30px;
      font-size:12px;
    }
  }
  .ico{
     font-family: 'iconfont';
  }
  /* .is-selected{
    color:#000 !important;
  } */
  .mint-tab-item{
    font-size: 20px;
  }
  .is-selected{
    color:red!important;
  }
</style>
